<template>
	<view class="page">
		<view class="box_1" :style="{ backgroundImage: 'url('+bg+')' }">
			<view class="box_9">
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg"
					class="single-avatar_1"></image>
				<view class="block_7">
					<view class="image-text_min">
						<view class="image-text_3">
							<text lines="1" class="text-group_1">张丹妮</text>
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26b7e98326991c247397c0e13b804a22edae9884.png"
								class="icon_2"></image>
						</view>
						<image
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5ef25ac1fae2c45aac458922dd8f0ad96a414904.png"
							class="icon_3"></image>
					</view>
					<view class="" style="display: flex;flex-direction: row; ">
						<view class="tag_1">
							<text lines="1" class="text_2">黄金会员</text>
						</view>
						<view class="tag_2">
							<text lines="1" class="textzhi">直推:齐志龙</text>
						</view>
						<!-- <view class="tag_2">
							<text lines="1" class="textzhi">间推:总阳阳</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="tag-list">
				<u-tag v-for="(mark, markIndex) in marklist" :key="markIndex" :text="mark.name"
					:borderColor="mark.id == 2 ? '#F1F3F6' : '#F1F3F6'" :bgColor="mark.id == 2 ? '#F1F3F6' : '#F1F3F6'"
					:color="mark.id == 2 ? '#4F78B5' : '#BEBDBD'" size="mini"></u-tag>
			</view>
			<view class="box_10">
				<view class="text-wrapper_8">
					<text lines="1" class="text_3">积分:280</text>
					<text lines="1" class="text_4">优惠券:2</text>
				</view>
				<view class="text-wrapper_9" @click="member_edit">
					<image 
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/66d44fd3fa047120be1e0edb2b291a5712c051f6.png"
						class="icon_4"></image>
					<text lines="1" class="text_5">档案袋</text>
				</view>
			</view>
		</view>

		<view class="" style="margin-top: 20rpx;margin-left: 20rpx;">
			<u-sticky>
				<u-tabs :list="tabsList" lineColor="#FF4040" :activeStyle="{
								color: '#000000'
							}" :inactiveStyle="{
								color: '#353535'
							}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			</u-sticky>
		</view>
		<!-- 订单 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 72vh;overflow: hidden;" v-if="currentTab == 0">
			<view class="list" style="padding: 0 30rpx 30rpx 30rpx;">
				<order-form />
			</view>
		</scroll-view>
		<!-- 记录 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 72vh;overflow: hidden;" v-if="currentTab == 1">
			<view class="list">
				<detail-record />
			</view>
		</scroll-view>
		<!-- 标签 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 72vh;overflow: hidden;" v-if="currentTab == 2">
			<view class="list">
				<detail-label />
			</view>
		</scroll-view>
		<!-- 票夹 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 72vh;overflow: hidden;" v-if="currentTab == 3">
			<view class="list" v-if="ticket_list.length" style="padding: 0 30rpx 30rpx 0rpx;">
				<ticket-Holder v-for="item in ticket_list" :key="item.id" :data="item" :lapse="currentTab === 0"
					@click="onClick(item)" />
			</view>

			<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</scroll-view>
		<!-- 卡包 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 72vh;overflow: hidden;" v-if="currentTab == 4">
			<view class="list" v-if="list.length" style="padding: 0 30rpx 30rpx 30rpx;">
				<card-pack-item v-for="item in list" :key="item.id" :data="item" :showQrcode="currentTab !== 1"
					:lapse="currentTab === 1" @click="onClick(item)" />
			</view>

			<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</scroll-view>

		<!-- 档案 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 72vh;overflow: hidden;" v-if="currentTab == 5">
			<view class="list" style="padding: 0 30rpx 30rpx 30rpx;">
				<edit-members />
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import cardPackItem from './card-pack-item.vue'
	import ticketHolder from './ticket-holder.vue'
	import editMembers from './edit_members.vue'
	import orderForm from './order-form.vue'
	import detailRecord from './detail-record.vue'
	import detailLabel from './detail-label.vue'
	export default {
		components: {
			cardPackItem,
			ticketHolder,
			editMembers,
			orderForm,
			detailRecord,
			detailLabel
		},
		data() {
			return {
				marklist: [{
					name: "票",
					id: 2
				}, {
					name: "计次",
					id: 2
				}, {
					name: "时间",
					id: 1
				}, {
					name: "充值",
					id: 2
				}, {
					name: "场地",
					id: 2
				}, {
					name: "培",
					id: 1
				}, {
					name: "私",
					id: 2
				}, {
					name: "赛",
					id: 1
				}],
				bg: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/0392bf75fe15a0dac6b61b76f40572ac773da78e.png',
				currentTab: 0,
				tabsList: [{
						name: '订单'
					}, {
						name: '记录'
					},
					{
						name: '标签'
					},
					// {
					// 	name: '票夹'
					// },
					// {
					// 	name: '卡包'
					// },

					// {
					// 	name: '档案'
					// },

				],
				list: [{
						account_balance: "10.00",
						alias_name: "",
						autoopendate: null,
						card_id: 431,
						cardno: "B3120230801094917594",
						cardstate: 1,
						cardtype: 3,
						consumption_type: [],
						currency: "0.00",
						else_text: "10.00元",
						enddate: "0000-00-00",
						goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/ae/ab123272ec4de6aef9d9d798c742f2.png?attname=231.png",
						goods_name: "800测试卡8.1",
						id: 9328,
						is_yxq: 1,
						last_disabled_date: null,
						left_time: null,
						leftnum: 0,
						order_item_id: "8591",
						product_id: 431,
						recharge_amount: "10.00",
						specify: "",
						startdate: "0000-00-00",
						starttime: "2023-08-01 09:49:17",
						type: 3,
						venue_name: "扬中奥体中心",
						venue_thumb: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg",
						yxq: "0000-00-00 - 0000-00-00",
					},
					{
						account_balance: null,
						alias_name: "",
						autoopendate: "2023-06-10 00:00:00",
						card_id: 415,
						cardno: "B1120230609135727678",
						cardstate: 2,
						cardtype: 1,
						consumption_type: [],
						currency: "0.00",
						else_text: "41次",
						enddate: "0000-00-00",
						goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/da/d42c864f45a5cd9054d289a0461231.png?attname=%E7%BB%847%402x.png",
						goods_name: "游泳50次卡6.8",
						id: 788,
						is_yxq: null,
						last_disabled_date: null,
						left_time: null,
						leftnum: 41,
						order_item_id: "6976",
						product_id: 415,
						recharge_amount: "42.00",
						specify: "",
						startdate: "0000-00-00",
						starttime: "2023-06-09 13:57:27",
						type: 1,
						venue_name: "苏州市体育中心",
						venue_thumb: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/ab/eb19425d9b932cc78947031a234757.png?attname=%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83%E8%AF%A6%E6%83%85+%282%29.png",
						yxq: "长期有效",
					},
					{
						account_balance: null,
						alias_name: "",
						autoopendate: null,
						card_id: 368,
						cardno: "B2120230525132956935",
						cardstate: 1,
						cardtype: 2,
						consumption_type: [],
						currency: "0.00",
						else_text: "30天",
						enddate: "0000-00-00",
						goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/99/482ccaee01fc2019c94e22c6802feb.png?attname=%E7%BB%848%402x.png",
						goods_name: "游泳个人月卡5.24",
						id: 644,
						is_yxq: 1,
						last_disabled_date: null,
						left_time: 30,
						leftnum: 0,
						order_item_id: "6136",
						product_id: 368,
						recharge_amount: "30.00",
						specify: "",
						startdate: "0000-00-00",
						starttime: "2023-05-25 13:29:56",
						type: 2,
						venue_name: "扬中奥体中心",
						venue_thumb: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg",
						yxq: "0000-00-00 - 0000-00-00",
					},

				],
				ticket_list: [{
						choose_date: "0000-00-00",
						consumption_type: ["0"],
						days: 1,
						enddate: "0000-00-00",
						goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/a9/bb3d1d5ebe4cae35c1e90ccea378c5.jpg?attname=%E9%97%A8%E7%A5%A8.jpg",
						goods_name: "游泳单次票",
						id: 1598,
						inventory: 1,
						is_yxq: null,
						leftnum: 1,
						product_id: 427,
						specify: "",
						startdate: "0000-00-00",
						starttime: "2023-08-03 16:30:07",
						ticket_no: "A1120230803163007972",
						time_id: 0,
						venue_id: 213,
						venue_name: "苏州市体育中心",
						venue_thumb: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/ab/eb19425d9b932cc78947031a234757.png?attname=%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83%E8%AF%A6%E6%83%85+%282%29.png",
						yxq: "长期有效",
						zt: 0,
					},

				]
			}
		},
		onLoad() {

		},
		methods: {
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			member_edit() {
				uni.navigateTo({
					url: './edit_members'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import '../../static/css/member/member_index.scss';
	.page {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.box_1 {
			height: 270rpx;
			background-size: 100% 100%;
			background-position: 0% 0%;
			width: 663rpx;
			display: flex;
			flex-direction: column;
			margin: 19rpx 0 0 43rpx;

			.box_9 {
				width: 236rpx;
				height: 80rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0 0 30rpx;
			}

			.single-avatar_1 {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.block_7 {
				width: 136rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.image-text_min {
				width: 65vw;
				height: 29rpx;
				margin-left: 2rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
			}

			.image-text_3 {
				width: 145rpx;
				height: 29rpx;
				margin-left: 2rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
			}

			.text-group_1 {
				width: 90rpx;
				height: 29rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 30rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 34rpx;
			}

			.icon_2 {
				width: 25rpx;
				height: 27rpx;
				margin-top: 1rpx;
			}
			.icon_3 {
				width: 40rpx;
				height: 40rpx;
				margin-top: 1rpx;
			}
			.icon_4 {
				width: 19rpx;
				height: 23rpx;
				margin-top: 1rpx;
			}

			.tag_1 {
				background-image: linear-gradient(270deg, rgba(204, 168, 121, 1.000000) 0, rgba(204, 168, 121, 1.000000) 0, rgba(229, 199, 152, 1.000000) 100.000000%, rgba(229, 199, 152, 1.000000) 100.000000%);
				border-radius: 6rpx;
				height: 40rpx;
				margin-top: 11rpx;
				display: flex;
				flex-direction: row;
				width: 112rpx;
			}

			.tag_2 {
				height: 40rpx;
				margin-top: 11rpx;
				display: flex;
				flex-direction: row;
				width: 300rpx;
			}

			.text_2 {
				width: 94rpx;
				height: 23rpx;
				overflow-wrap: break-word;
				color: rgba(108, 62, 0, 1);
				font-size: 24rpx;
				text-align: left;
				white-space: nowrap;
				line-height: 34rpx;
				margin: 3rpx 0 0 9rpx;
			}

			.textzhi {
				width: 140rpx;
				height: 40rpx;
				color: rgba(255, 255, 255, 1.0);
				font-size: 24rpx;
				text-align: left;
				line-height: 34rpx;
				margin: 3rpx 0 0 9rpx;
			}

			.tag-list {
				display: flex;
				margin-top: 20rpx;
				margin-left: 25rpx;

				/deep/ view {
					margin-left: 4rpx;
				}
			}

			.box_10 {
				width: 100%;
				height: 50rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				margin: 45rpx 0 11rpx 29rpx;
			}

			.text-wrapper_8 {
				width: 210rpx;
				height: 65rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				.text_3 {
					width: 119rpx;
					height: 23rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					font-family: SourceHanSansCN-Normal;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 24rpx;
				}
				
				.text_4 {
					width: 191rpx;
					height: 23rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					font-family: SourceHanSansCN-Normal;
					font-weight: normal;
					text-align: right;
					white-space: nowrap;
					line-height: 24rpx;
				}
				
			}
			
			.text-wrapper_9 {
				width: 150rpx;
				height: 40rpx;
				display: flex;
				flex-direction: row;
				// justify-content: space-between;
				
				.text_5 {
					width: 100rpx;
					height: 23rpx;
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					text-align: left;
					line-height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

	}
</style>